<template>
    <view>
        <!-- pages/mealpage/details/index.wxml -->
        <view class="details">
            <view class="msg flexbox-sb">
                <view class="centers">
                    <image class="headimg" :src="info.userHeadPortrait"></image>
                    <view class="name">{{ info.userNickName }}</view>
                </view>
                <view class="status-s">{{ info.userMobile }}</view>
            </view>
            <view class="serverbox">
                <view class="server">服务项目：</view>
                <view class="mt-20" v-for="(item, index) in serverList" :key="index">
                    <view class="flexbox-sb mt-20 servertype">
                        <view class="servername" v-if="item.serviceName.length > 8">
                            <view>{{ item.serviceName }} x{{ item.residualQuantity > 0 ? item.residualQuantity : 0 + item.quantity > 0 ? item.quantity : 0 }}</view>
                            <view>(原价￥{{ item.originalPrice }}/次)</view>
                        </view>
                        <view class="servername" v-else>
                            {{ item.serviceName }} x{{ item.residualQuantity > 0 ? item.residualQuantity : 0 + item.quantity > 0 ? item.quantity : 0 }}（原价￥{{
                                item.originalPrice
                            }}/次）
                        </view>
                        <view class="centers uncenter" @tap="onShowLog" :data-index="index">
                            <view class="mr-10">剩余{{ item.residualQuantity > 0 ? item.residualQuantity : 0 }}次</view>
                            <view :class="item.show ? 'jiao' : 'jiao1'"></view>
                        </view>
                    </view>

                    <view class="flexbox-sb record mt-20" v-if="item.show">
                        <view class="record-text">使用记录：</view>
                        <view>
                            <view class="record-time mb-10" v-if="item.userPackageBagServiceLog.length > 0" v-for="(a, index1) in item.userPackageBagServiceLog" :key="index1">
                                {{ a.createTime }} {{ a.usedQuantity }}次
                            </view>
                            <view class="record-time mb-10" v-if="item.userPackageBagServiceLog.length == 0">您还未使用此服务</view>
                        </view>
                    </view>
                </view>
                <view class="hr mt-20"></view>
                <view class="flexbox-sb common">
                    <view>订单编号：</view>
                    <view>{{ info.orderSn }}</view>
                </view>
                <view class="flexbox-sb common">
                    <view>创建时间</view>
                    <view>{{ info.createTime }}</view>
                </view>
                <!-- <view class="flexbox-sb common">
      <view>完成时间</view>
      <view>{{info.orderSn}}</view>
    </view> -->
                <view class="flexbox-sb common" v-if="info.status == 2">
                    <view>过期时间</view>
                    <view>{{ info.validityTime }}</view>
                </view>
            </view>
            <view class="centers call mt-20" @tap="openkefu">
                <image class="icon-60 mr-20" :src="imgUrl + 'shopphone.png'"></image>
                <view>联系客户</view>
            </view>
            <view class="btn" @tap.stop.prevent="onCancel" v-if="info.status == 0">去核销</view>
        </view>
        <!-- 客服弹窗 -->
        <view :class="'modal bottom-modal ' + (show1 ? 'show' : '')" @touchmove.stop.prevent="preventTouchMove">
            <view class="dialog dialog-goods" style="border-radius: 40rpx 40rpx 0 0" catchtap>
                <view class="bg-white padding-xl text-center">
                    <view class="padding-top-xs text-xl text-bold">联系客户</view>
                    <view class="padding-tb text-df text-darkGrey" @tap.stop.prevent="callphone">{{ info.mobile }}</view>
                    <view class="show_box radiues text-white text-df bg-orange text-center" @tap="getshow1">取消</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/mealpage/details/index.js
const app = getApp(); // 引入app

const _request = require('../../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            show1: false,
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            id: '',

            serverList: [],

            // 服务
            info: {
                userHeadPortrait: '',
                userNickName: '',
                userMobile: '',
                orderSn: '',
                createTime: '',
                status: 0,
                validityTime: '',
                mobile: ''
            },

            a: {
                createTime: '',
                usedQuantity: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData(
            {
                id: options.id
            },
            () => {
                this.getPackageBagInfoByStoreId();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        callphone() {
            uni.makePhoneCall({
                phoneNumber: this.info.mobile
            });
        },

        openkefu() {
            this.setData({
                show1: !this.show1
            });
        },

        getshow1() {
            this.setData({
                show1: !this.show1
            });
        },

        // 门店查询套餐包详情
        getPackageBagInfoByStoreId() {
            const { id } = this;

            _request
                .get('/packageBag/getPackageBagInfoByStoreId', {
                    storeId: uni.getStorageSync('storeId'),
                    id
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        let data = res.data.data; // 动态修改窗口的标题

                        uni.setNavigationBarTitle({
                            title: data.status == 0 ? '待核销' : data.status == 1 ? '已完成' : '已过期'
                        });
                        this.setData({
                            info: data,
                            serverList: data.services
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 展示剩余次数
        onShowLog(e) {
            this.setData({
                serverList: this.serverList.map((item, index) => {
                    if (index === e.currentTarget.dataset.index) {
                        if (item.show) {
                            item.show = !item.show;
                        } else {
                            item.show = true;
                        }
                    }

                    return item;
                })
            });
        },

        // 去核销
        onCancel() {
            uni.scanCode({
                //扫描API
                success: function (res) {
                    if (res.path) {
                        uni.navigateTo({
                            url: '/pages/mealpage/cancel/index?id=' + res.path.split('=')[1]
                        });
                    } else {
                        uni.showToast({
                            title: '识别失败，请扫描正确的意约订单码',
                            icon: 'none',
                            duration: 1500
                        });
                    }
                },
                fail: function (res) {
                    uni.showToast({
                        title: '识别失败，请扫描正确的意约订单码',
                        icon: 'none',
                        duration: 1500
                    });
                }
            });
        },

        preventTouchMove() {
            console.log('占位：函数 preventTouchMove 未声明');
        }
    }
};
</script>
<style>
/* pages/mealpage/details/index.wxss */
.details {
    padding: 30rpx 20rpx;
}

.msg {
    height: 140rpx;
    background: #ffffff;
    box-shadow: 2px 2px 8px 0px rgba(236, 236, 236, 0.4);
    border-radius: 8px;
    margin-bottom: 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
}

.headimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.name {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.status-s {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 80rpx;
    color: #333333;
}

.server {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.serverbox {
    height: 100%;
    background: #ffffff;
    box-shadow: 2px 2px 8px 0px rgba(236, 236, 236, 0.4);
    border-radius: 8px;
    background-color: #ffffff;
    padding: 30rpx 20rpx;
}

.servername {
    position: relative;
    padding-left: 20rpx;
    /* height: 20rpx; */
    max-width: 240px;
    word-break: break-word;
    line-height: 1.6;
}

.servername::after {
    content: '';
    flex-grow: 1;
    width: 8rpx;
    height: 8rpx;
    background: #ff8722;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: -6rpx;
    top: 14rpx;
}

.servername::before {
    content: '';
    flex-grow: 1;
    width: 16rpx;
    height: 16rpx;
    opacity: 0.49;
    background: #ff8722;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: -10rpx;
    top: 10rpx;
}

.servertype {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    /* line-height: 40rpx;
  height: 40rpx; */
    padding-left: 20rpx;
}

.jiao {
    width: 0;
    height: 0;
    border-right: 12rpx solid transparent;
    border-left: 12rpx solid transparent;
    border-top: 12rpx solid #666666;
}

.jiao1 {
    width: 0;
    height: 0;
    border-right: 12rpx solid transparent;
    border-left: 12rpx solid transparent;
    border-bottom: 12rpx solid #666666;
}

.record {
    width: 100%;
    background: #f2f2f2;
    border-radius: 8px;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    padding: 20rpx 20rpx 20rpx 10rpx;
    box-sizing: border-box;
}

.hr {
    width: 100%;
    height: 1rpx;
    border-bottom: 2rpx solid #f1f1f1;
}

.common {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    margin-top: 20rpx;
}

.call {
    height: 120rpx;
    background: #ffffff;
    box-shadow: 2px 2px 8px 2px rgba(241, 241, 241, 0.4);
    border-radius: 8px;
    justify-content: center;
}

.btn {
    height: 88rpx;
    background: #ff8722;
    border-radius: 44px;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin-top: 200rpx;
    text-align: center;
}

.show_box {
    width: 650rpx;
    line-height: 90rpx;
}
.uncenter {
    height: 18px;
}
</style>
